<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
    <script src="../org/jquery.min.js"></script>
    <script src="../org/angular-ui-router.min.js"></script>
</head>

<body>

<div ng-app="hd">
    <div ui-view></div>
</div>

<script>
    var m = angular.module('hd', ['ui.router']);

    m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默认路由（没有匹配的情况下显示这个锚点）
        $urlRouterProvider.otherwise('/home');
        //定义路由规则
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'view/home.html',
            })
            .state('home.news', {// 路由嵌套，第一种方式，在home.html中也需要相应的改动
                url: '/news',
                template: '<h1>新闻</h1>',
            })
            .state('game', {
                url: '/game',
                parent: 'home', // 路由嵌套，第二种方式
                template: '<h1>游戏</h1>',
            })
    }])


</script>

</body>

</html>